<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>PictureCutter</title>
        <link rel="stylesheet" type="text/css" href="./main.css" />
        <script src="plugins/jszip.min.js"></script>
        <script src="plugins/FileSaver.min.js"></script>
        <script src="plugins/jspdf.min.js"></script>
    </head>
    <body>
        <div id="app">
            <div id="title_frame">
                <h1 id="title">PictureCutter</h1>
                <div id="introduce">一个可将长图片自动裁剪成多张图片的工具</div>
            </div>
            <div id="handle_frame">
                <div id="handle_frame_first">
                    <h2 class="step_text">1、上传图片</h2>
                    <img id="cover_upload_img" src="./images/input_button.png">
                    <input id="upload_input" type="file" accept="image/*" onchange="InitImage(this)">
                    <p id="upload_text"></p>
                </div>
                <div id="handle_frame_second">
                    <h2 class="step_text">2、导出设置</h2>
                    <div class="selection_frame">
                        <h3 class="selection_title">设置裁剪比例：</h3>
                        <div class="selection_radios">
                            <span class="selection_radio"><input name="pageType" type="radio" value="A4" checked="true" />A4</span>
                            <span class="selection_radio"><input name="pageType" type="radio" value="A3" />A3</span>
                            <span class="selection_radio">
                                <input name="pageType" type="radio" value="customize" />自定义：
                                <input id="customize_x_input" type="number" value="1" min="0" />
                                <span>*</span>
                                <input id="customize_y_input" type="number" value="1" min="0" />
                            </span>
                        </div>
                    </div>
                    <div class="selection_frame">
                        <h3 class="selection_title">选择导出格式：</h3>
                        <span class="selection_radios">
                            <span class="selection_radio"><input name="pictureType" type="radio" value="png" checked="true" />png</span>
                            <span class="selection_radio"><input name="pictureType" type="radio" value="jpg" />jpg</span>
                            <span class="selection_radio"><input name="pictureType" type="radio" value="pdf" />pdf</span>
                        </span>
                    </div>
                </div>
                <div id="handle_frame_third">
                    <h2 class="step_text">3、导出图片</h2>
                    <img id="cover_export_img" src="./images/export_button.png">
                    <button id="export_button" onclick="toExport()">导出</button>
                </div>
            </div>
        </div>
        <script src="./main.js"></script>
    </body>
</html>